<template>
    <div class="warn-history-table">
        <el-row justify="end" type="flex" style="margin-bottom: 10px;">
            <el-col :span="5">
                <el-date-picker
                    size="mini"
                    v-model="date"
                    type="datetime"
                    placeholder="按时间搜索"
                    style="width: 100%;">
                </el-date-picker>
            </el-col>
        </el-row>
        <el-table
            :data="tableData"
            :cell-style="{background: 'rgba(1, 20, 48, 1)'}" 
            :header-row-style="{ background: '#f2f2f2' }"
            id="table"
            :height="tableHeight || '350px'"
            border
            style="width: 100%;">
            <el-table-column
                v-for="item in tableHeaderColumn"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
            </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'warn-history-table',
    props: {
        tableHeight: {
            type: Number,
            default: 350
        }
    },

    created() {
        
    },

    data() {
        return {
            date: '',
            tableHeaderColumn: [
                { label: '序号', prop: 'sn', width: 60 },
                { label: '报警时间', prop: 'time'},
                { label: '测站编码', prop: 'code' },
                { label: '测站名称', prop: 'name'},
                { label: '行政区', prop: 'address'},
                { label: '报警类型', prop: 'type' },
                { label: '报警值', prop: 'number', width: 120}
            ],
            tableData: [
                {sn: 1, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 2, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 3, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 4, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 5, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 6, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 7, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 },
                {sn: 8, time: '2023-06-29 : 17:00', code: 'A457B77', name: '天津站', address: '天津市天津站', type: '严重', number: 123 }
            ],
            
        };
    },

    methods: {
        
    }
};
</script>

<style lang="scss" scoped>
    .warn-history-table {
        padding: 15px;
        :deep{
            .el-input__inner {
                background-color: rgba(1, 20, 48, 1);
                border: 1px solid #03405d;
                border-radius: 15px;
                padding-right: 10px;
                font-size: 14px;
            }

            .el-table__cell {
                padding: 5px 0;
                color: #fff;
                border-right: 1px solid #03405d;
                border-bottom: 1px solid #03405d;
            }

            .el-table__cell.is-leaf {
                border-bottom: 1px solid #03405d;
            }

            .el-table__body {
                .el-table__cell {
                    padding: 10px 0;
                }
            }

            .el-table--border, .el-table--group {
                border: 1px solid #03405d;
            }
            .el-table--border th.el-table__cell.gutter:last-of-type {
                border: none;
            }

            .el-table__header .el-table__cell {
                font-weight: 600;
            }

            .el-table--border::after, .el-table--group::after, .el-table::before {
                background-color: rgba(1, 20, 48, 1);
            }

        }

    }

    .el-pagination {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        :deep {
            button {
                background: rgba(0, 0, 0, 0);
            }
            .btn-prev, .btn-next {
                background: rgba(0, 0, 0, 0);
                color: #02A7F0;
            }
            .el-pager li {
                background: rgba(0, 0, 0, 0);
                color: #fff;
                font-size: 14px;
            }
            .el-pager li.active {
                color: #1890ff;
            }
            .el-pager li:hover {
                color: #1890ff;
            }

            button:disabled {
                color: #c0c4cc;
            }
            
        }
    }

    
</style>